import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {List, Grid, Button, InputItem, Modal, Flex} from 'antd-mobile';
import ModalImage from 'react-modal-image'

const operation = Modal.operation;
const prompt = Modal.prompt;
const Item = List.Item;

// 如果不是使用 List.Item 作为 children
const CustomChildren = props => (
    <div
        onClick={props.onClick}
        style={{backgroundColor: '#fff', paddingLeft: 15}}
    >
        <div className="test" style={{display: 'flex'}}>
            <div style={{
                flex: 1,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap'
            }}>{props.children}</div>
            <div style={{textAlign: 'right', color: '#888', marginRight: 15}}>{props.extra}</div>
        </div>
    </div>
);

@inject('repairInfoStore')
@observer
class WhiteSpaceExample extends Component {
    componentDidMount() {
        this.listHeight = document.documentElement.clientHeight - 50;
        this.props.repairInfoStore.queryOwnerInfo();
    }

    generatingUrl = (data) => {
        let urlData = [];
        for (const i in data) {
            urlData.push({
                url: data[i],
                id: Math.random().toString(36).substr(3)
            });
        }
        return urlData;
    };

    imageView = (imageList) => {
        let view = [];
        const len = imageList.length;
        for (let i = 0; i < 4; i++) {
            if (len > i) {
                view.push(<Flex.Item style={{height: '100px'}}>
                    <ModalImage
                        small={imageList[i]}
                        large={imageList[i]}
                    />
                </Flex.Item>)
            } else {
                view.push(<Flex.Item>
                </Flex.Item>)
            }
        }
        return view;
    };

    render() {
        const {repairInfo, ownerInfo, treatmentResult, staffInfo, acceptance, assignAcceptance} = this.props.repairInfoStore;
        console.log("staffInfo", staffInfo);
        return (<div style={{height: '100%'}}>
                <div style={{height: this.listHeight, overflow: 'auto'}}>
                    <List>
                        <Item wrap={true} extra={repairInfo.type}>报修类型</Item>
                        <Item wrap={true} extra={ownerInfo ? ownerInfo.ownerName : ''}>报修人</Item>
                        <Item wrap={true} extra={ownerInfo ? ownerInfo.ownerMob : ''}>报修人手机号</Item>
                        <Item wrap={true} extra={repairInfo.commit_time}>报修时间</Item>
                        <Item wrap={true} extra={ownerInfo ? ownerInfo.commName : ''}>小区</Item>
                        <Item wrap={true} extra={repairInfo.detailed_addr}>详细地址</Item>
                        <Item wrap={true} extra={repairInfo.content}>报修内容</Item>
                        {repairInfo.repair_per ?
                            <Item wrap={true} extra={repairInfo.repair_per}>责任人姓名</Item> : ''}
                        {repairInfo.repair_per_phone ?
                            <Item wrap={true} extra={repairInfo.repair_per_phone}>责任人电话</Item> : ''}
                        {repairInfo.treatment_result ?
                            <Item wrap={true} extra={repairInfo.treatment_result}>处理结果</Item> : ''}
                        <Flex>
                            {this.imageView(repairInfo.image_urls.slice())}
                        </Flex>
                    </List>
                </div>
                <div style={{
                    width: '100%',
                    position: 'fixed',
                    bottom: 0
                }}>

                    <Flex>
                        {repairInfo.state === 0 || repairInfo.state === 1 ?
                            <Flex.Item>
                                <Button type="ghost"
                                        onClick={staffInfo && staffInfo.subRole[0].orgRole === 3 ? () => operation([
                                            {
                                                text: '受理', onPress: () => acceptance({
                                                id: repairInfo.id,
                                                state: 1,
                                                ownerCode: ownerInfo ? ownerInfo.ownerCode : '',
                                                repairPer: staffInfo.staffName,
                                                repairPerPhone: staffInfo.phoneNum
                                            })
                                            },
                                            {
                                                text: '分配受理人', onPress: () => assignAcceptance(
                                                {
                                                    id: repairInfo.id,
                                                    state: 1,
                                                    ownerCode: ownerInfo ? ownerInfo.ownerCode : ''
                                                }
                                            )
                                            },
                                        ]) : () => acceptance({
                                            id: repairInfo.id,
                                            state: 1,
                                            ownerCode: ownerInfo ? ownerInfo.ownerCode : '',
                                            repairPer: staffInfo.staffName,
                                            repairPerPhone: staffInfo.phoneNum
                                        })}>受理</Button>
                            </Flex.Item> : ''}
                        {repairInfo.state === 1 ?
                            <Flex.Item>
                                <Button type="ghost"
                                        onClick={() => prompt('输入提示', '请输入处理结果', [
                                            {text: '取消'},
                                            {
                                                text: '确定', onPress: value => treatmentResult({
                                                id: repairInfo.id,
                                                state: 2,
                                                ownerCode: ownerInfo ? ownerInfo.ownerCode : '',
                                                treatmentResult: value
                                            })
                                            },
                                        ], 'default')}>处理结果</Button>
                            </Flex.Item> : ''
                        }
                    </Flex>

                </div>

                <style>{
                    ` .am-image-picker-list .am-image-picker-item .am-image-picker-item-remove {
                            display:none;
                       }
                       .react-modal-image-download {
                            display: none !important;
                       }
                    `
                }</style>
            </div>
        );
    }
}

export default WhiteSpaceExample;